<template>
  <div class="resource">
    <el-card shadow="hover">
      <div style="margin-bottom: 10px;">
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          @click="search"
          icon="el-icon-search"
          type="cyan"
          size="small"
          style="margin-left: 20px;"
          >搜索</el-button
        >
        <el-button @click="cancelData" icon="el-icon-circle-close" size="small"
          >重置</el-button
        >
      </div>
      <el-row :gutter="20">
        <el-form
          ref="params"
          :model="params"
          label-width="120px"
          size="small"
          class="searchForm"
        >
          <el-col :span="8">
            <el-form-item label="对应位置:" prop="type">
              <el-select
                v-model="params.type"
                filterable
                placeholder="请选择"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in examineList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="跳转地址:" prop="context">
              <el-select
                v-model="params.context"
                filterable
                placeholder="请选择"
                clearable
                @change="search"
              >
                <el-option
                  v-for="item in linkList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <div class="container">
      <div class="handle-box">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          class="mr10"
          >新增</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          class="handle-del mr10"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          >批量删除</el-button
        >
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column label="轮播图片/视频" align="center" width="400">
          <template slot-scope="scope">
            <div v-if="scope.row.attribute == 1">
              <img
                style="height:100px;width:380px;"
                :src="showUrl + scope.row.pic"
                @click="showImg(scope.row.attribute,scope.row.pic)"
              />
            </div>
            <div v-if="scope.row.attribute == 2">
              <video 
                id="video1"
                :src="showUrl + scope.row.pic"
                width="380px"
                controls
                controlslist="nodownload"
                disablePictureinPicture
                x5-playsinline
                playsinline
                webkit-playsinline="true"
                @click="showImg(scope.row.attribute,scope.row.pic)"
              >
                <!-- 你当前设备无法播放 -->
                your browser does not support the video tag
              </video>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="对应位置" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ status(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="跳转地址" align="center" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.context =='2'?statusLink(scope.row.context):scope.row.context =='1'?statusLink(scope.row.context):scope.row.context =='3'?statusLink(scope.row.context):scope.row.context =='4'?statusLink(scope.row.context):scope.row.context=='5'?statusLink(scope.row.context):scope.row.context=='6'?statusLink(scope.row.context):scope.row.context}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    </div>
    <!-- 新增编辑 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="680px">
      <el-form
        :rules="rules2"
        ref="formData"
        :model="formData"
        label-width="140px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item label="图片/视频位置:" prop="type">
              <el-select v-model="formData.type" clearable  @change="changea">
                <el-option
                  v-for="item in examineList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="轮播图跳转页面:" prop="context" v-show="this.formData.type == 2 || this.formData.type == 3|| this.formData.type == 4|| this.formData.type == 6|| this.formData.type == 7">
              <el-select v-model="formData.context" clearable>
                <el-option
                  v-for="item in linkList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="轮播图跳转页面:" prop="context" v-show='this.formData.type == 1|| this.formData.type == 5'>
              <el-input v-model="formData.context"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="formData.context == 6">
            <el-form-item label="课程选择:" prop="">
              <el-select v-model="formData.courseId" clearable>
                <el-option
                  v-for="item in courseOptions"
                  :key="item.id"
                  :label="item.courseName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="上传文件类型:" prop="attribute" v-if="formData.type != 5">
              <el-radio-group v-model="formData.attribute">
                <el-radio label="1">图片</el-radio>
                <el-radio label="2">视频</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="上传文件类型:" prop="attribute" v-if="formData.type == 5">
              <el-radio-group v-model="formData.attribute">
                <el-radio label="1">图片</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="介绍:">
              <el-input v-model="formData.introduce"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="formData.attribute == 1">
            <el-form-item label="上传图片:" prop="pic">
              <el-upload
                class="avatar-uploader"
                :action="upImage + '/cms/company/upload'"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="formData.pic"
                  :src="showUrl + formData.pic"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="formData.attribute == 2">
            <el-form-item label="上传视频" prop="pic">
              <el-upload
                class="avatar-uploader"
                :headers="headers"
                :action="upImage + `/cms/company/upload`"
                :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
                :on-progress="uploadVideoProcess"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :show-file-list="false"
              >
                <video
                  v-if="formData.pic && !videoFlag"
                  :src="showUrl + formData.pic"
                  class="avatar video-avatar"
                  controls="controls"
                >
                  您的浏览器不支持视频播放
                </video>
                <i
                  v-else-if="formData.pic == '' && !videoFlag"
                  class="el-icon-plus avatar-uploader-icon"
                ></i>
                <el-progress
                  v-if="videoFlag == true"
                  type="circle"
                  :percentage="videoUploadPercent"
                  style="margin-top: 7px"
                ></el-progress>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPost" size="small">取消</el-button>
        <el-button @click="submitForm" type="primary" size="small"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="轮播图片/视频" :visible.sync="imgVisible" width="700px">
      <div v-if="attr == 1">
        <img :src="showUrl + imgPath" alt="" style="width: 670px;" />
      </div>
      <div v-if="attr == 2">
        <video
          id="video"
          width="670px"
          :src="showUrl + imgPath"
          controls
          controlslist="nodownload"
          disablePictureinPicture
          x5-playsinline
          playsinline
          webkit-playsinline="true"
        >
          your browser does not support the video tag
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryBanner,
  addBanner,
  updateBanner,
  delBanner
} from "@/api/web/index";
import { queryCourseList } from "@/api/school/school";
import { getToken } from "@/utils/auth";
import { constants } from 'fs';
export default {
  components: {},
  props: [],
  data() {
    return {
      // 非多个禁用
      multiple: true,
      //删除
      ids: [],
      headers: { Authorization: "Bearer " + getToken() },
      upImage: process.env.VUE_APP_BASE_API,
      examineList: [
        {
          id: "1",
          title: "官网页面"
        },
        {
          id: "5",
          title: "商学院网站页面"
        },
        {
          id: "6",
          title: "商学院logo"
        },
        {
          id: "7",
          title: "时代科技logo"
        },
        {
          id: "2",
          title: "小程序个人端首页"
        },
        {
          id: "3",
          title: "小程序商学院"
        },
        {
          id: "4",
          title: "小程序咨询公司端"
        }
      ],
      linkList: [
        {
          id: "1",
          title: "我的关注"
        },
        {
          id: "2",
          title: "认证课堂"
        },
        { 
          id: "3",
          title: "更多课程"
        },
        {
          id: "4",
          title: "咨询老师"
        },
        {
          id: "5",
          title: "我的证书"
        },
        {
          id: "6",
          title: "课程详情"
        }
      ],
      isShow:true,
      examine: false,
      title666: "",
      rules2: {
        type: [{ required: true, message: "请选择轮播位置", trigger: "blur" }],
        pic: [{ required: true, message: "请上传图片", trigger: "blur" }],
        context: [
          { required: true, message: "请选择跳转页面", trigger: "blur" }
        ],
        attribute: [
          { required: true, message: "请选择文件类型", trigger: "blur" }
        ]
      },
      input: "",
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        pic: ""
      },
      imgVisible: false,
      imgPath: undefined,
      attr: undefined,

      videoFlag: false,
      videoUploadPercent: "",
      isShowUploadVideo: false,
      CourseOptions: []
    };
  },
  computed: {},
  created() {
    this.getData00();
    this.fetchCourseList();
  },
  mounted() {},
  watch: {},
  methods: {
    fetchCourseList() {
      queryCourseList({
        pageNum: 1,
        pageSize: 1000
      })
        .then(res => {
          if (res.code == 200) {
            this.courseOptions = res.rows;
          }
        })
    },
    // 键值配对
    status(val) {
      var str = this.examineList.find(function(item) {
        console.log(val,item)
        return item.id == val;
      });
      if (str) return str.title;
    },
    statusLink(val) {
      var str = this.linkList.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.formData.pic = res.data;
        this.$message.success(`上传成功`);
      }
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 100;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/qlv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$message.error("视频大小不能超过100MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if (res.code == 200) {
        this.formData.pic = res.data;
        this.$message.success("上传视频成功");
      } else {
        this.$message.error("上传视频失败");
      }
    },
    showImg(attr,row) {
      this.imgVisible = true;
      this.imgPath = row;
      this.attr = attr;
    },
    cancelPost() {
      this.dialogVisible = false;
      this.getData00();
    },
    // 新增修改的方法
    submitForm() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          if (this.title666 == "新增") {
            addBanner(this.formData).then(res => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success(`新增成功`);
                this.dialogVisible = false;
                this.getData00();
              }
            });
          } else {
            updateBanner(this.formData).then(res => {
              if (res.code == 200) {
                this.$message.success(`修改成功`);
                this.dialogVisible = false;
                this.uploading = false;
                this.getData00();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     changea(){
      console.log(this.formData.type)
      if(this.formData.type == 1 && this.formData.type == 5 ){
          this.isShow = !this.isShow;//取反
      }
    },
    // 重置搜索框
    cancelData() {
      this.resetForm("params");
      this.getData00();
    },
    handleAdd() {
      this.formData = {
        pic: ""
      };
      this.dialogVisible = true;
      this.examine = false;
      this.title666 = "新增";
    },
    handleEdit(index, row) {
      this.formData = row;
      this.dialogVisible = true;
      this.examine = false;
      this.title666 = "编辑";
    },
    // 删除操作
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      console.log(val,this.ids)
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delBanner(id);
        })
        .then(() => {
          this.getData00();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    //获取数据
    getData00() {
      queryBanner(this.params).then(res => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.pageTotal = res.total;
          this.loading = false;
        }
      });
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.getData00();
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.params, "pageNum", val);
      this.getData00();
    }
  }
};
</script>

<style scoped>
.resource {
  padding: 30px;
}
.container {
  margin-top: 20px;
}
.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.compangImg {
  display: block;
  width: 280px;
  height: 200px;
}
.avatar-uploader .el-upload {
  width: 368px;
  height: 128px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  /* overflow: hidden; */
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 368px;
  height: 128px;
  line-height: 128px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 368px;
  height: 128px;
  display: block;
}
#video {
  text-align: center;
  margin: auto;
}
</style>
